body{
    padding: 20px;
    background: url(./images/海.jpg) center no-repeat;
    background-size: 100%;
}

.NaNull{
    width: 0px;
    height: 0px;
}

#game{
    width: 500px;
    height: 230px;
    border: 5px solid rgb(187, 247, 47);
    position: relative;
    margin: 0 auto;
    margin-top: 50px;
    overflow: hidden;
}

#rank2{
    text-align: center;
    color: rgb(0, 0, 0);
    font-family: "华文彩云";
    font-size: 20px;
}

#backgroundLayer{
    width: 789px;
    height: 230px;
    position: absolute;
    animation-name: backgroundImages,backgroundMove1;
    animation-duration: 0.4s,10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#backgroundLayer2{
    width: 789px;
    height: 230px;
    position: absolute;
}

#cdTime{
    position:absolute;
    width: 30px;
    height: 30px;
    color: rgb(97, 210, 135);
    z-index: 4;
    text-align: center;
    -webkit-text-stroke: 1px red;
}

#skill{
    width:30px;
    height: 30px;
    background:url(./images/技能/图标.png);
    border: 1px solid black;
    position: relative;
    margin: 0 auto;
    margin-top:30px;
    overflow: hidden;
}

.spiner{
    position: absolute;
    z-index: 1;
    top: -15px;
    left: -15px;
    width: 30px;
    height: 60px;
    transform-origin: right ;
    animation: spin 10s infinite linear;
    border-radius:  100px 0 0 100px;
    background-color: rgb(201, 202, 202);
}

.masker{
    position: absolute;
    top: -15px;
    left: -15px;
    width: 30px;
    height: 60px;
    border-radius: 100px 0px 0px 100px;
    background-color: rgb(121, 121, 121);
    animation: second-half-show 10s steps(1,end) infinite;
}

.filler{
    position: absolute;
    top: -15px;
    right: -15px;
    width: 30px;
    height: 60px;
    background-color: rgb(121, 121, 121);
    animation: second-half-hide 10s steps(1,end) infinite;
}

#dino{
    background: url(./images/图层\ 1.png);
    position:absolute;
    bottom: 0px;
}

#grade{
    width: 250px;
    height: 500px;
    background-color: rgb(183, 183, 17);
    float: left;
    margin-top: -350px;
    margin-left: 75%;
}

.jumpAndImagesClass{
    width: 121px;
    height: 86px;
    animation-name: jump,dinoImgs;
    animation-duration: 0.5s,1s;
    animation-iteration-count: infinite;
}

.ImagesClass{
    width: 121px;
    height: 86px;
    animation-name: dinoImgs;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.skillClass{
    width: 115px;
    height: 201px;
    animation: skill 1.7s infinite;
}

#block{
    position:absolute;
    bottom: 0px;
    left: 450px;
}

.block1Class{
    width: 19px;
    height: 35px;
    background: url(./images/障碍物1.png);
    animation:block 1s linear infinite;
}
.block2Class{
    width: 15px;
    height: 30px;
    background: url(./images/障碍物2/障碍物2_01.png);
    animation:block 1s linear infinite;
}

@keyframes spin{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

@keyframes second-half-show{
    0%{
        z-index: 3;
    }
    50%,
    100%{
        z-index: 0;
    }
}

@keyframes second-half-hide{
    0%{
        opacity: 1;
    }
    50%,
    100%{
        opacity: 0;
    }
}

@keyframes skill{
    0%{
        background: url(./images/技能/图层\ 1.png);
    }
    7%{
        background: url(./images/技能/图层\ 2.png);
    }
    15%{
        background: url(./images/技能/图层\ 3.png);
    }
    20%{
        background: url(./images/技能/图层\ 4.png);
    }
    27%{
        background: url(./images/技能/图层\ 5.png);
    }
    35%{
        background: url(./images/技能/图层\ 6.png);
    }
    40%{
        background: url(./images/技能/图层\ 7.png);
    }
    45%{
        background: url(./images/技能/图层\ 8.png);
    }
    50%{
        background: url(./images/技能/图层\ 9.png);
    }
    55%{
        background: url(./images/技能/图层\ 10.png);
    }
    60%{
        background: url(./images/技能/图层\ 11.png);
    }
    65%{
        background: url(./images/技能/图层\ 12.png);
    }
    70%{
        background: url(./images/技能/图层\ 13.png);
    }
    75%{
        background: url(./images/技能/图层\ 14.png);
    }
    80%{
        background: url(./images/技能/图层\ 15.png);
    }
    85%{
        background: url(./images/技能/图层\ 16.png);
    }
    90%{
        background: url(./images/技能/图层\ 17.png);
    }
    100%{
        background: url(./images/技能/图层\ 17.png);
    }
}

@keyframes dinoImgs{
    0%{
        background: url(./images/图层\ 1.png);
    }
    12.5%{
        background: url(./images/图层\ 2.png);
    }
    25%{
        background: url(./images/图层\ 3.png);
    }
    37.5%{
        background: url(./images/图层\ 4.png);
    }
    50%{
        background: url(./images/图层\ 5.png);
    }
    62.5%{
        background: url(./images/图层\ 6.png);
    }
    75%{
        background: url(./images/图层\ 7.png);
    }
    100%{
        background: url(./images/图层\ 8.png);
    }
}

@keyframes block{
    0%{
        left: 490px;
    }   

    100%{
        left: -55px;
    }
}

@keyframes jump{
    0%{
        bottom: 0px;
    }
    40%{
        bottom: 100px;
    }
    70%{
        bottom: 100px;
    }
    100%{
        bottom: 0px;
    }
}

@keyframes backgroundImages{
    0%{
        background: url(./images/背景/图层\ 1.png);
    }
    25%{
        background: url(./images/背景/图层\ 2.png);
    }
    50%{
        background: url(./images/背景/图层\ 3.png);
    }
    75%{
        background: url(./images/背景/图层\ 4.png);
    }
    100%{
        background: url(./images/背景/图层\ 1.png);
    }
}

@keyframes backgroundMove1{
    0%{
        left: 0px;
    }
    100%{
        left: -1550px;
    }
}

@keyframes backgroundMove2{
    0%{
        left: 500px;
    }
    100%{
        left: -1050px;
    }
}

@keyframes backgroundImages2{
    0%{
        background: url(./images/背景/图层\ 1.png);
    }
    25%{
        background: url(./images/背景/图层\ 2.png);
    }
    50%{
        background: url(./images/背景/图层\ 3.png);
    }
    75%{
        background: url(./images/背景/图层\ 4.png);
    }
    100%{
        background: url(./images/背景/图层\ 1.png);
    }
}